import React, { memo, useEffect } from "react"
import { shallowEqual, useDispatch, useSelector } from "react-redux"

import { HomeWrapper } from "./style";
import HomeBanner from "./c-cpns/home-banner"
import { fetchHomeDataAction } from "../../store/modules/home"

import HomeSectionV1 from "./c-cpns/home-section-v1"
import HomeSectionV2 from "./c-cpns/home-section-v2"
import YearnCity from "./c-cpns/yearn-city";
import PlusHouse from "./c-cpns/plus-house";

const Home = memo(() => {
  // 从redux中获取数据
  const { 
    goodPriceInfo,
    highScoreInfo,
    hotDestinationInfo,
    exploreInfo,
    yearnCityInfo,
    plusInfo
  } = useSelector(state => state.home, shallowEqual)

  const dispatch = useDispatch()
  useEffect(() => {
    // 请求数据
    dispatch(fetchHomeDataAction())
  },[dispatch])

  return (
    <HomeWrapper>
      <HomeBanner />
      <div className="content">
        {/* 热门目的地 */}
        { hotDestinationInfo && <HomeSectionV2 data={hotDestinationInfo}/> }
        {/* 探索精彩之地 */}
        { exploreInfo && <HomeSectionV2 data={exploreInfo}/> }
        {/* 你可能想去 */}
        { yearnCityInfo && <YearnCity data={yearnCityInfo}/> }
        {/* 高好评房源 */}
        { highScoreInfo && <HomeSectionV1 data={highScoreInfo}/> }
        {/* 高性价比房源 */}
        { goodPriceInfo && <HomeSectionV1 data={goodPriceInfo}/> }
        {/* Plus房源 */}
        { plusInfo && <PlusHouse data={plusInfo}/> }
      </div>
    </HomeWrapper>
  )
})

export default Home;
